<template>
  <div class="class_message">
    <div class="header">
      <div class="class_bread">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 15px">
            <el-breadcrumb-item :to="{ path: '/layout/employee' }">系统主页</el-breadcrumb-item>
            <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
             <el-breadcrumb-item>系统人员管理</el-breadcrumb-item>
    </el-breadcrumb>
      </div>
      <div class="class_time">
        <div style="margin-top: 12px">
        <time class="time"  > <i class="fa fa-clock-o"></i>{{ currentDate }}</time>
        </div>
      </div>
    </div>
    <div class="function">
      <div class="function_button">
       <el-button type="success"icon="fa fa-plus-square" @click="btnAddClick">添加</el-button>
          <el-dialog
            :before-close="handleClose"
            :visible.sync="buttonAddFun"
            title="添加系统用户"
            width="30%">
            <el-form>
              <el-form-item label="日期:" label-width="120px">
                <el-date-picker
                  v-model="form.date"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                 >
                </el-date-picker>
              </el-form-item>
              <el-form-group>
                <el-form-item label="职位:" label-width="120px">
                  <el-select v-model="form.role" clearable placeholder="请选择">
                    <el-option
                      v-for="item in options_role"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form-group>
              <el-form-group>
                <el-form-item label="性别:" label-width="120px">
                  <el-select v-model="form.sex" clearable placeholder="请选择">
                    <el-option
                      v-for="item in options_sex"
                      :key="item.value_sex"
                      :label="item.label"
                      :value="item.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form-group>
              <el-form-group>
                <el-form-item label="姓名:" label-width="120px">
                  <el-input v-model="form.name" style="width: 76%"></el-input>
                </el-form-item>
              </el-form-group>
              <el-form-group>
                <el-form-item label="地址:" label-width="120px">
                  <el-input v-model="form.address" style="width: 76%"></el-input>
                </el-form-item>
              </el-form-group>
              <el-form-item style="background:white;margin-top: 50px;margin-left: 60%">
                  <el-button type="danger" @click="buttonAddFun =false" style="width: 50%">取消</el-button>
                  <el-button type="primary" @click="submitdata"style="width: 50%">确定</el-button>
              </el-form-item>
            </el-form>

          </el-dialog>
       <el-button type="danger"icon="el-icon-delete" @click="btnDeleteClick">删除</el-button>
          <el-dialog
          :before-close="handleClose"
          :visible.sync="buttonDelFun"
          title="删除系统用户"
          width="30%">
          <el-form>
            <el-form-item label="日期:" label-width="120px">
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item style="background:white;margin-top: 50px;margin-left: 60%">
              <el-button type="danger" @click="buttonDelFun =false" style="width: 50%">取消</el-button>
              <el-button type="primary" @click="submitdata"style="width: 50%">确定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
       <el-button type="primary"style="width: 34%"icon="fa fa-paste">修改</el-button>
      </div>
      <div class="function_search">

      </div>
    </div>
    <div class="table">
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      :header-cell-style="{background:'hsl(199 16% 85% / .5)'}"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="date"
        label="就业日期"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="role"
        label="职位"
        width="180">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别"
          width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        >
      </el-table-column>
    </el-table>
    <el-pagination
      small
      layout="prev, pager, next"
      :total="50">
    </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      btnAddClick(){
        this.buttonAddFun=true;
      },
      handleClose(){
        this.buttonAddFun=false;
        this.buttonDelFun=false;
      },
      submitdata(){
        //重新转向
        var  _this=this;
        this.axios({
          url: 'http://localhost:3000/employee/add',
          method:'get',
          params:{
            date:this.form.date,
            name:this.form.name,
            role:this.form.role,
            sex:this.form.sex,
            address:this.form.address
          }
        }).then(function (res) {
          if (res.data.flag){
            _this.tableData=res.data.addlist;//把数据传到服务层的数据对象中
            _this.$message('添加成功');
            _this.buttonAddFun=false;
          }
          else {
            alert('添加失败')
          }
        })
      },
      btnDeleteClick(){
        this.buttonDelFun=true;
      }

    },
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            sex:'男',
            role:'部门经理',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            sex:'男',
            role:'部门经理',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            sex:'男',
            role:'部门经理',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            sex:'男',
            role:'部门经理',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            sex:'男',
            role:'部门经理',
            address: '上海市普陀区金沙江路 1518 弄'
          }
        ],
        currentDate:new Date().toDateString(),
        buttonAddFun:false,
        buttonDelFun:false,
        form:{
          date:'',
          name:'',
          sex:'',
          role:'',
          address:'',
        },
        options_role: [{
          value: '选项1',
          label: '普通员工'
        }, {
          value: '选项2',
          label: '项目主任'
        }, {
          value: '选项3',
          label: '项目经理'
        }, {
          value: '选项4',
          label: '项目工程师'
        }, {
          value: '选项5',
          label: '啥也不是'
        }],
        options_sex:[
          {
            value_sex: '选项1',
            label: '男'
          },
          {
            value_sex: '选项2',
            label: '女'
          }
        ],
         value_role:'',
         value_sex:'',
      }

    },mounted() {
      this.axios({
        url:'http://localhost:3000/employee/list',
        method:'get'
      }).then((res)=>{
        console.log(res.data);
        this.tableData = res.data;
      })
    }
  }
</script>

<style scoped>
  .class_message{
    margin:20px 15px 20px 15px;
    /*border: 2px solid black;*/
  }
  .header{
    width: 100%;
    height: 35%;
    margin-bottom: 10px;
  }
  .class_bread{
    margin-bottom: 10px;
    float: left;
    height: 50px;
    width: 40%;

  }
  .class_time{
    margin-bottom: 20px;
    float: right;
    height: 50px;
    width: 55%;
    text-align: right;
  }
  .function{
    width: 100%;
    height: 60px;
    margin-top: 55px;
    margin-bottom: 0px;
  }
  .function_button{
    width: 40%;
    height: 75%;
    float: left;
    margin-top: 10px;
    background: #42b983;
  }
  .el-button{
    width: 33%;
    height: 100%;
    margin: 0px;
    float: left;
  }
  .el-dialog__body{
    border: 1px solid red;
  }
  .el-dialog__header{
    border: 1px solid pink;
    margin-bottom: 10px;
  }
  .div_form_dialog{
    width: 150px;
    height: 400px;
  }
  .div_form_dialog_sub{
    width: 100%;
    height: 70%;
    border: 10px solid red;
  }
  .function_search{
    width: 55%;
    height: 75%;
    float: right;
  }

</style>

